<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>图书管理系统</title>

<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">

	<script src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="${pageContext.request.contextPath}/plugins/jQuery/js.cookie.js" ></script>

<%--	<style>--%>
<%--		html,body{--%>
<%--			width:100%;--%>
<%--			height:100%--%>
<%--		}--%>

<%--		body{--%>

<%--			background:"src/main/webapp/img/n.jpg") no-repeat;--%>
<%--			background-size: 100%;--%>
<%--		}--%>
<%--	</style>--%>
</head>
<body class="hold-transition login-page" style="background-image: url(img/n.jpg);background-size: 100%;">
	<div class="login-box">
		<div class="login-logo">
			<a href="all-admin-index.html"><b>图书馆</b></a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">登录系统</p>

			<p style="text-align: right;color: red;position: absolute" id="info"></p><br/>
				<div class="form-group has-feedback">
					<input type="text" name="username" class="form-control" id="id"
						placeholder="用户名"> <span
						class="glyphicon glyphicon-envelope form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" name="password" class="form-control" id = "passwd"
						placeholder="密码"> <span
						class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
							<label><input type="checkbox"> 记住 下次自动登录</label>
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button  id = "loginButton" class="btn btn-primary btn-block btn-flat" onclick="login11()">登录</button>
					</div>
					<!-- /.col -->
				</div>

			<script>




				$("#id").keyup(
						function () {
							if(isNaN($("#id").val())){
								$("#info").text("提示:账号只能为数字");
							}
							else {
								$("#info").text("");
							}
						}
				)
				// 记住登录信息
				function rememberLogin(username, password, checked) {
					Cookies.set('loginStatus', {
						username: username,
						password: password,
						remember: checked
					}, {expires: 30, path: ''})
				}
				// 若选择记住登录信息，则进入页面时设置登录信息
				function setLoginStatus() {
					var loginStatusText = Cookies.get('loginStatus');
					if (loginStatusText) {
						var loginStatus;
						try {
							loginStatus = JSON.parse(loginStatusText);
							$('#id').val(loginStatus.username);
							$('#passwd').val(loginStatus.password);
							$("#remember").prop('checked',true);
						} catch (__) {}
					}
				}

				// 设置登录信息
				setLoginStatus();

				function login11 () {
					var id =$("#id").val();
					var passwd=$("#passwd").val();
					var remember=$("#remember").prop('checked');
					if (id === '') {
						$("#info").text("提示:账号不能为空");
					}
					else if( passwd ===''){
						$("#info").text("提示:密码不能为空");
					}
					else if(isNaN( id )){
						$("#info").text("提示:账号必须为数字");
					}
					else {
						$.ajax({
							type: "POST",
							url: "${pageContext.request.contextPath}/login/api/loginCheck",
							data: {
								id:id ,
								passwd: passwd
							},
							dataType: "json",
							success: function(data) {
								if (data.stateCode.trim() === "0") {
									$("#info").text("提示:账号或密码错误！");
								} else if (data.stateCode.trim() === "1") {
									$("#info").text("提示:登陆成功，跳转中...");
									window.location.href="${pageContext.request.contextPath}/book/admin_books";
								} else if (data.stateCode.trim() === "2") {
									if(remember){
										rememberLogin(id,passwd,remember);
									}else {
										Cookies.remove('loginStatus');
									}
									$("#info").text("提示:登陆成功，跳转中...");
									window.location.href="${pageContext.request.contextPath}/book/reader_books";

								}
							}
						});
					}
				}
				$(function(){
					$(document).keypress(function (e){
						if(e.keyCode == 13){
							//执行你想执行的方法，keyCode代表不同的按键
							login11();
						}
					})
				})

			</script>
			<a href="#">忘记密码</a><br>


		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->

	<!-- jQuery 2.2.3 -->
	<!-- Bootstrap 3.3.6 -->
	<!-- iCheck -->

	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script>
		$(function() {
			$('input').iCheck({
				checkboxClass : 'icheckbox_square-blue',
				radioClass : 'iradio_square-blue',
				increaseArea : '20%' // optional
			});
		});
	</script>
</body>

</html>